<template>
  <div class="app-container">
    <h3 class="title">运营人员管理</h3>
    <div class="inputBox">
      <el-input v-model="search.operatorSn" class="input" placeholder="请输运营人员编号" />
      <el-input v-model="search.name" class="input" placeholder="请输入姓名" />
      <el-input v-model="search.city" class="input" placeholder="请输入所在城市" />
      <el-select v-model="search.categoryId" placeholder="请选择类别">
        <el-option v-for="item in categoryList" :key="item.id" :value="item.id" :label="item.name"/>
        <!-- <el-option :value="1" :label="'男'"/> -->
      </el-select>
      <el-select v-model="search.gender" class="select" placeholder="请选择性别">
        <el-option :value="0" :label="'女'"/>
        <el-option :value="1" :label="'男'"/>
      </el-select>
      <!-- <el-input v-model="search.mobilePhone" class="input" placeholder="请输购买人手机号" /> -->
      <el-date-picker
        v-model="search.startTime"
        class="startDate"
        type="date"
        value-format="yyyy-MM-dd"
        placeholder="选择开始日期"/>
      <el-date-picker
        v-model="search.endTime"
        class="endDate"
        type="date"
        value-format="yyyy-MM-dd"
        placeholder="选择结束日期"/>
      <el-select v-model="search.enableStatus" class="select" placeholder="请选择状态">
        <el-option :value="0" :label="'停用'"/>
        <el-option :value="1" :label="'启用'"/>
      </el-select>
      <el-button type="primary" class="ml10" @click="toSearch">查询</el-button>
      <el-button type="primary" @click="toReset">重置</el-button>
    </div>
    <el-button v-if="setPermissionBtn('/operatorInfo/add', addBtn)" type="primary" class="addBtn" @click="toaddPage()">{{ addBtn.btnName }}</el-button><br><br>
    <!-- {{ categoryList }} -->

    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="加载中请稍后"
      border
      fit
      highlight-current-row>
      <template slot="empty">
        <div class="noData">暂无数据</div>
      </template>
      <el-table-column label="运营人员编号">
        <template slot-scope="scope">
          {{ scope.row.operatorSn }}
        </template>
      </el-table-column>
      <el-table-column label="姓名">
        <template slot-scope="scope">
          {{ scope.row.name }}
        </template>
      </el-table-column>
      <el-table-column label="性别">
        <template slot-scope="scope">
          <span v-if="scope.row.gender === 0">女</span>
          <span v-if="scope.row.gender === 1">男</span>
        </template>
      </el-table-column>
      <el-table-column label="所在城市">
        <template slot-scope="scope">
          <span v-if="scope.row.city==='市辖区'">{{ scope.row.province }}</span>
          <span v-else>{{ scope.row.city }}</span>
          <!-- {{ scope.row.province }}
          {{ scope.row.city }} -->
        </template>
      </el-table-column>
      <el-table-column label="运营类别">
        <template slot-scope="scope">
          <span v-html="formatCategory(scope.row.categoryId)"/>
        </template>
      </el-table-column>
      <el-table-column label="手机号" width="110">
        <template slot-scope="scope">
          {{ scope.row.mobilePhone }}
        </template>
      </el-table-column>
      <!-- <el-table-column label="详细地址">
        <template slot-scope="scope">
          {{ scope.row.province | provinceCodeStr }}{{ scope.row.city | cityCodeStr }}{{ scope.row.county | countyCodeStr }}{{ scope.row.detailAddress }}
        </template>
      </el-table-column> -->
      <el-table-column label="状态">
        <template slot-scope="scope">
          <span v-if="scope.row.enableStatus === 0">停用</span>
          <span v-else-if="scope.row.enableStatus === 1">启用</span>
        </template>
      </el-table-column>
      <el-table-column label="添加时间" width="110">
        <template slot-scope="scope">
          {{ scope.row.createTime }}
        </template>
      </el-table-column>
      <el-table-column align="center" prop="created_at" label="操作" width="180">
        <template slot-scope="scope">
          <el-button
            v-if="setPermissionBtn('/operatorInfo/edit', scope.row)"
            :disabled="scope.row.enableStatus === 1"
            size="mini"
            value="编辑"
            type="primary"
            @click="edit(scope.row)">{{ scope.row.btnName }}</el-button>
          <el-button
            v-if="setPermissionBtn('/operatorInfo/edit/enableStatus', scope.row)"
            :type="scope.row.enableStatus == 0?'success':'danger'"
            size="mini"
            value="启用/停用"
            @click="update(scope.row.id, scope.row.enableStatus)"
            v-html="splitName(scope.row.btnName, scope.row.enableStatus)"/>
        </template>
      </el-table-column>
    </el-table>
    <!-- <remark :remark-list="remarkList" :remark-visible.sync="remarkVisible" :remark-index="remarkIndex" /> -->
    <!-- <remarkPropt
      ref="remarke"
      :remark-propt-list="remarkProptList"
      :remark-propt-visible.sync="remarkProptVisible"
      :remark-propt-index="remarkProptIndex"
      :remark-type="-1"
      @remarkText="remarkText" /> -->
    <!-- <detail :detialvisible.sync="dialogTableVisible" :dialogdata.sync="list" :myindex.sync="detailIndex" :detail-mode="'address'" /> -->
    <pagination v-show="total>0" :total="total" :page.sync="listQuery.pageNum" :limit.sync="listQuery.pageSize" @pagination="fetchData" />
  </div>
</template>

<script>
import Pagination from '@/components/Pagination'
// import BankView from '@/components/Dialog/BankView'
import detail from '@/components/detail'
import Dialog from '@/components/Dialog'
import { Message } from 'element-ui'
import { getOrderList, selectCard, addRemark, getRemarkPage } from '@/api/order'
import { getLocalUid, setLocalUid, getLocalId, setLocalId } from '@/utils/uid'
import { getPermission } from '@/api/permission'
import { getLocalUserName, setLocalUserName } from '@/utils/uid'
import remark from '@/components/remark'
import remarkPropt from '@/components/remark/remarkPrompt'
import { provinceAndCityData, regionData, CodeToText, TextToCode } from 'element-china-area-data'

import { addressUpdate } from '@/api/address'
import { getOperationPersonList, upDateOperationPersonStatus, getOperationCategoryList } from '@/api/operation'
const categoryList = {};
export default {
  components: { Pagination, Dialog, detail, remarkPropt },
  filters: {
    formatCategory(id) {
      return categoryList[id]
    },

    // statusFilter(status) {
    //   const statusMap = {
    //     published: 'success',
    //     draft: 'gray',
    //     deleted: 'danger'
    //   }
    //   return statusMap[status]
    // },
    // 等于之前的level
    // formatvipId(vipId) {
    //   const vipIdMap = {
    //     1: '泰山美妈',
    //     2: '泰山美妈团',
    //     3: '泰山美妈社',
    //     4: '泰山美妈会'
    //   }
    //   return vipIdMap[vipId]
    // },

    nullStr(str) {
      if (str === '' || str === null) {
        return '-'
      } else {
        return str
      }
    },
    provinceCodeStr(provinceCode) {
      return CodeToText[[provinceCode]]
    },
    cityCodeStr(cityCode) {
      if (cityCode === '120100' || cityCode === '110100') {
        return ''
      } else {
        return CodeToText[[cityCode]]
      }
    },
    countyCodeStr(countyCode) {
      return CodeToText[[countyCode]]
    }
  },
  data() {
    return {
      // visible: false,
      remarkProptVisible: false,
      remarkProptList: [],
      remarkProptIndex: -1,
      userName: '',
      userType: -1,
      //   showDialog: false,
      //   courseSection: '', // 课程金额
      //   bankName: '', // 银行名称
      //   bankId: '', // 银行Id
      //   orderId: '', // 订单Id
      //   type: 1, // 1:提课程款. 2:退佣金
      //   tid: '',
      //   courseTitle: '新增课程',
      list: [],
      total: 0,
      listLoading: true,
      listQuery: {
        pageNum: 0,
        pageSize: 10
      },
      search: {
        operatorSn: '',
        name: '',
        city: '',
        categoryId: '',
        gender: '',
        mobilePhone: '',
        startTime: '',
        endTime: '',
        enableStatus: ''
      },
      dialogFormVisible: false,
      course: {
        courseName: '',
        sign: '',
        introduce: '',
        address: '',
        imgUrl: '',
        courseType: '',
        teacher: '',
        courseTime: '',
        startTime: '',
        endTime: ''
      },
      dialogTableVisible: false,
      detailIndex: -1,
      permissionShow: false, // 权限数据未到达之前按钮隐藏
      // permissionList: [] // 权限数据列表
      addBtn: {},
      buttonArr: [
        {
          name: '新增运营人员',
          value: '/operatorInfo/add'
        },
        {
          name: '编辑',
          value: '/operatorInfo/edit'
        },
        {
          name: '启用/停用',
          value: '/operatorInfo/edit/enableStatus'
        }
      ],
      categoryList: []
    }
  },
  computed: {
    formatCategory() {
      return function(id) {
        let str = ''
        this.categoryList.forEach(item => {
          if (item.id === id) {
            str = item.name
          }
        })
        return str
      }
    },
    // 权限按钮
    setPermissionBtn() {
      return function(str, row) {
        let index = -1
        const buttonList = this.$store.getters.button // this.buttonArr //
        index = buttonList.findIndex(item => item.value === str)
        // console.log(index)
        if (index !== -1) {
          row.btnName = buttonList[index].name
          return true
        } else {
          return false
        }
      }
    },
    splitName() {
      return function(name, status) {
        console.log('name:', name)
        console.log('status:', status)
        const nameArr = name.split('/')
        if (status === 0) {
          return nameArr[0]
        } else {
          return nameArr[1]
        }
      }
    }
  },
  watch: {
    'permissionList'(newVal) {
      this.permissionList = newVal
      this.permissionShow = true
    }
  },
  beforeCreate() {
    // this.getOperationCategoryList()
  },
  created() {
    this.getUserType()
    this.fetchData()
    // this.getPermissonFn()
    this.getOperationCategoryList()
  },
  mounted() {
    this.getPermissonFn() // 获取按钮权限 vuex的button
  },
  methods: {
    // 获取运营类别
    getOperationCategoryList() {
      const obj = {
        pageNum: 0,
        pageSize: 1000
      }
      getOperationCategoryList(obj).then(res => {
        if (res.code === '200') {
          this.categoryList = res.data.list
        } else {
          Message.error('获取运营类别失败' + res.message + '-' + res.data)
        }
      })
    },
    // 权限数据的获取
    // getPermissonFn() {
    //   const id = getLocalId()
    //   const uid = getLocalUid()
    //   const data = { uid }
    //   getPermission(id, data).then(res => {
    //     console.log('权限结果', res)
    //     if (res.code === '200') {
    //       this.permissionList = res.data
    //       // console.log('权限名称：', this.getPermissionName(this.permissionList))
    //     } else {
    //       Message.error(res.message + '-' + res.data)
    //     }
    //   })
    // },
    toaddPage() {
      this.$router.push({
        path: '/operation/personAdd',
        query: {}
      })
    },
    // 备注
    changeRemarks(uid, id, index) {
      this.remarkProptIndex = index
      console.log('--->', uid, id, index)
      const userData = ''
      this.remarkProptVisible = true
      this.$refs.remarke.request(uid, id)
    },
    remarkText() {
      this.fetchData()
    },
    getUserType() {
      switch (getLocalUserName()) {
        case 'admin':
          this.userType = 1
          break;
        case 'sale':
          this.userType = 2
          break;
        case 'casher':
          this.userType = 3
          break;
      }
    },
    // 查询
    toSearch() {
      if (this.search.startTime) this.search.startTime = this.search.startTime + ' 00:00:00'
      if (this.search.endTime) this.search.endTime = this.search.endTime + ' 23:23:59'
      this.listLoading = true
      console.log(this.search)
      const newData = this.objectCon(this.listQuery, this.search)
      // console.log(this.search.startTime)
      // console.log(this.search.endTime)
      getOperationPersonList(newData).then(response => {
        console.log(response)
        if (response.code === '200') {
          this.list = response.data.list
          this.total = response.data.total
          setTimeout(() => {
            this.listLoading = false
          }, 0.5 * 1000)
        } else {
          Message.error(response.message + '' + response.data)
          this.listLoading = false
        }
      })
    },
    // 重置
    toReset() {
      this.search.operatorSn = ''
      this.search.name = ''
      this.search.city = ''
      this.search.categoryId = ''
      this.search.gender = ''
      this.search.mobilePhone = ''
      this.search.startTime = ''
      this.search.endTime = ''
      this.search.enableStatus = ''
    },
    // isDialog(a) {
    //   this.visible = false
    //   this.showDialog = false
    // },
    fetchData() {
      this.listLoading = true
      const newData = this.objectCon(this.listQuery)
      console.log('newData:=>', newData)
      getOperationPersonList(newData).then(response => {
        if (response.code === '200') {
          this.list = response.data.list
          console.log('订单数据：', this.list)
          this.total = response.data.total
          setTimeout(() => {
            this.listLoading = false
          }, 0.5 * 1000)
        } else {
          this.listLoading = false
        }
      })
    },
    see(index) {
      this.dialogTableVisible = true
      this.detailIndex = index
    },
    edit(row) {
      const query = { isEdit: true, data: row }
      this.$router.push({
        path: '/operation/personAdd',
        query
      })
    },
    // del(id) {
    //   this.$confirm('是否删除此发货地址', '提示', {
    //     confirmButtonText: '确定',
    //     cancelButtonText: '取消',
    //     type: 'warning'
    //   }).then(res => {
    //     const data = { status: 0, id }
    //     addressUpdate(data).then(res => {
    //       if (res.code === '200') {
    //         Message.success('删除成功')
    //         this.fetchData()
    //       } else {
    //         Message.error(res.message + res.data)
    //       }
    //     })
    //   })
    // },
    update(id, type) {
      const strAsk = type === 1 ? '是否停用？' : '是否启用？'
      const str = type === 1 ? '已停用' : '已启用'
      this.$confirm(strAsk, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(res => {
        type === 0 ? type = 1 : type = 0
        const data = { enableStatus: type, id }
        upDateOperationPersonStatus(data).then(res => {
          if (res.code === '200') {
            Message.success(str)
            this.fetchData()
          } else {
            Message.error(res.message + res.data)
          }
        })
      })
    }
  }
}
</script>
<style lang="scss" scoped>
  .inputBox{
    div{ margin-bottom: 10px;}
    .input:nth-of-type(1){ width: 200px }
    .input:nth-of-type(2){ width: 120px }
    .input:nth-of-type(3){ width: 150px }
    .input:nth-of-type(4){ width: 120px }
    .input:nth-of-type(5){ width: 120px }
    .input:nth-of-type(6){ width: 160px }
    .select:nth-of-type(4){width:50px}
    .select:nth-of-type(5){width:120px}
    .select:nth-of-type(9){width:120px}
    .startDate, .endDate{ width: 160px }
  }
</style>
